<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>danceWeui框架</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta content="telephone=no" name="format-detection">
	<link rel="stylesheet" href="../../css/weui.min.css">
	<link rel="stylesheet" href="../../css/danceWeui.css">
	<link rel="stylesheet" href="../../../iconfont/iconfont.css">
</head>
<body class="body__bg">

<div class="daui-navbar bg-gradual-blue">
	<div class="daui-navbar__hd">
		<a href="javascript:history.back(-1)"><i class="iconfontzz icon-fanhuijiantou"></i>返回</a>
	</div>
	<div class="daui-navbar__bd">表单</div>
	<div class="daui-navbar__hd">
		<a href="../index.html"><i class="iconfontzz icon-home"></i></a>
	</div>
</div>

<div class="daui-headline daui-headline_left">
	<div class="daui-headline__text-area">
		<h2 class="daui-headline__title">表单 Form</h2>
		<p class="daui-headline__desc">输入框、单选、复选等</p>
	</div>
</div>

<form>
	<div class="weui-cells__title">基础使用</div>
	<div class="weui-cells">
		<div class="weui-cell daui-cell_sm">
			<div class="weui-cell__hd daui-cell_require">姓名</div>
			<div class="weui-cell__bd">
				<input class="weui-input" name="input" placeholder="请输入姓名" />
			</div>
		</div>
		<div class="weui-cell daui-cell_sm">
			<div class="weui-cell__hd daui-cell_require">手机号码</div>
			<div class="weui-cell__bd">
				<input class="weui-input" name="input" placeholder="输入框带个按钮" />
			</div>
			<div class="weui-cell__ft">
				<button class="weui-btn bg-green shadow">验证码</button>
			</div>
		</div>
		<div class="weui-cell daui-cell_sm">
			<div class="weui-cell__hd daui-cell_require">验证码</div>
			<div class="weui-cell__bd">
				<input class="weui-input" name="input" placeholder="输入框带个按钮" />
			</div>
			<div class="weui-cell__ft">
				<div class="daui-capsule radius">
					<div class="daui-tag bg-blue">
						+86
					</div>
					<div class="daui-tag line-blue">
						中国大陆
					</div>
				</div>
			</div>
		</div>
		<div class="weui-cell daui-cell_sm">
			<div class="weui-cell__hd daui-cell_require">收货地址</div>
			<div class="weui-cell__bd">
				<textarea placeholder="请填写收货地址" class="daui-textarea" rows="3"></textarea>
			</div>
		</div>
		<div class="weui-cell weui-cell_select weui-cell_select-after daui-cell_sm">
			<div class="weui-cell__hd">课程</div>
			<div class="weui-cell__bd">
				<select class="weui-select" name="course">
					<option value="1">语文</option>
					<option value="2">数学</option>
					<option value="3">英语</option>
				</select>
			</div>
		</div>
		<div class="weui-cell daui-cell_sm">
			<div class="weui-cell__hd">性别</div>
			<div class="weui-cell__bd">
				<label class="radio-inline"><input type="radio" name="gender" value="1" /> 男</label>
				<label class="radio-inline"><input type="radio" name="gender" value="2" /> 女</label>
				<label class="radio-inline"><input type="radio" name="gender" value="3" /> 未知</label>
			</div>
		</div>
		<div class="weui-cell daui-cell_sm">
			<div class="weui-cell__hd">兴趣爱好</div>
			<div class="weui-cell__bd">
				<label class="radio-inline"><input type="checkbox" name="hobby" value="1"> 跑步</label>
				<label class="radio-inline"><input type="checkbox" name="hobby" value="2" /> 爬山</label>
				<label class="radio-inline"><input type="checkbox" name="hobby" value="3" /> 踢足球</label>
			</div>
		</div>
		<div class="weui-cell daui-cell_sm">
			<div class="weui-cell__hd">颜色</div>
			<div class="weui-cell__bd">				<input type="radio" class="magic-radio" id="color1" name="radiocolor" value="red" />				<label for="color1">红色</label>				<input type="radio" class="magic-radio" id="color2" name="radiocolor" value="green" />				<label for="color2">绿色</label>				<input type="radio" class="magic-radio" id="color3" name="radiocolor" value="yellow" />				<label for="color3">黄色 </label>
			</div>
		</div>
	</div>
	<div class="daui-buttonbar btn-group">
		<button formType="submit" class="weui-btn daui-btn_primary shadow round block">提交</button>
		<button formType="submit" class="weui-btn daui-btn_danger shadow round block">重置</button>
	</div>
</form>
	
<div class="daui-line daui-line_primary daui-line__rough"></div>

<form>
	<div class="weui-cells__title">垂直表单</div>
	<div class="weui-cell daui-cell_vertical">
		<div class="weui-cell__hd"><span class="daui-mustdot">*</span>姓名：</div>
		<div class="weui-cell__bd">
			<input class="daui-input" type="text" name="realname" placeholder="请输入姓名" />
		</div>
	</div>
	<div class="weui-cell daui-cell_vertical">
		<div class="weui-cell__hd"><span class="daui-mustdot">*</span>手机号：</div>
		<div class="weui-cell__bd">
			<input class="daui-input" type="text" name="mobile" placeholder="请输入手机号" />
		</div>
	</div>
	<div class="weui-cell weui-cell_select daui-cell_vertical">
		<div class="weui-cell__hd"><span class="daui-mustdot">*</span>证件类型：</div>
		<div class="weui-cell__bd">
			<select class="daui-input" name="idcardtype">
				<option value="1">身份证</option>
				<option value="2">学生证</option>
				<option value="3">其他</option>
			</select>
		</div>
	</div>
	<div class="weui-cell daui-cell_vertical">
		<div class="weui-cell__hd"><span class="daui-mustdot">*</span>证件号码：</div>
		<div class="weui-cell__bd">
			<input class="daui-input" type="text" name="idcard" placeholder="请输入证件号码" />
		</div>
	</div>
	<div class="weui-cell daui-cell_vertical">
		<div class="weui-cell__hd"><span class="daui-mustdot"></span>交通工具：</div>
		<div class="weui-cell__bd">			<input type="radio" class="magic-radio" id="transportation1" name="radiotransportation" value="1" />			<label for="transportation1">汽车</label>			<input type="radio" class="magic-radio" id="transportation2" name="radiotransportation" value="2" />			<label for="transportation2">火车</label>			<input type="radio" class="magic-radio" id="transportation3" name="radiotransportation" value="3" />			<label for="transportation3">飞机</label>
		</div>
	</div>
	<div class="daui-buttonbar btn-group">
		<button formType="submit" class="weui-btn daui-btn_primary daui-btn_block shadow round">提交</button>
		<button formType="submit" class="weui-btn daui-btn_danger daui-btn_block shadow round">重置</button>
	</div>
</form>

<div class="daui-line daui-line_primary daui-line__rough"></div>

<form>
	<div class="weui-cells__title">新式表单</div>
	<div class="weui-cells daui-cells_backdrop">
		<div class="weui-cell daui-cell_sm">
			<div class="weui-cell__hd daui-cell_require">姓名</div>
			<div class="weui-cell__bd">
				<input class="weui-input" type="text" name="realname" placeholder="请输入姓名" />
			</div>
		</div>
		<div class="weui-cell daui-cell_sm">
			<div class="weui-cell__hd daui-cell_require">联系方式</div>
			<div class="weui-cell__bd">
				<input class="weui-input" type="text" name="realname" placeholder="请输入联系方式" />
			</div>
		</div>
		<div class="weui-cell weui-cell_select weui-cell_select-after daui-cell_sm">
			<div class="weui-cell__hd daui-cell_require">场次</div>
			<div class="weui-cell__bd">
				<select name="meeting" class="weui-select J_meeting_select">
					<option value="0">请选择</option>
					<option value="1">上午场</option>
					<option value="2">下午场</option>
				</select>
			</div>
			<div class="weui-cell__ft"></div>
		</div>
		<div class="weui-cell daui-cell_sm">
			<div class="weui-cell__hd">组别</div>
			<div class="weui-cell__bd">				<input type="radio" class="magic-radio" id="yearage1" name="radioage" value="1" />				<label for="yearage1">青年组</label>				<input type="radio" class="magic-radio" id="yearage2" name="radioage" value="2" />				<label for="yearage2">中年组</label>
			</div>
		</div>
		<div class="weui-cell daui-cell_sm">
			<div class="weui-cell__hd">地址</div>
			<div class="weui-cell__bd">
				<textarea class="weui-textarea" type="text" name="realname" placeholder="请输入地址"></textarea>
			</div>
		</div>
		<div class="daui-buttonbar btn-group">
			<button formType="submit" class="weui-btn daui-btn_primary daui-btn_block shadow round">提交</button>
		</div>
	</div>
</form>

<div class="daui-line daui-line_primary daui-line__rough"></div>

<form>
	<div class="weui-cells">
		<div class="weui-cell daui-cell_titbar-two">
			<div class="weui-cell__hd"></div>
			<div class="weui-cell__bd">其他表单</div>
		</div>
	</div>
	
	<div class="weui-cells__title">单选列表</div>
	<div class="weui-cells weui-cells_radio">
		<label class="weui-cell weui-check__label" for="x11">
			<div class="weui-cell__bd">
				单选选项1
			</div>
			<div class="weui-cell__ft">
				<input type="radio" class="weui-check" name="radio11" id="x11">
				<span class="weui-icon-checked"></span>
			</div>
		</label>
		<label class="weui-cell weui-check__label" for="x12">
			<div class="weui-cell__bd">
				单选选项2
			</div>
			<div class="weui-cell__ft">
				<input type="radio" class="weui-check" name="radio11" id="x12" checked="checked">
				<span class="weui-icon-checked"></span>
			</div>
		</label>
	</div>
	
	<div class="weui-cells__title">单选选项</div>
	<div class="weui-cells weui-cells_radio">
		<label class="weui-cell weui-check__label" for="x13">
			<div class="weui-cell__hd">
				<input type="radio" class="weui-check" name="radio12" id="x13" checked="checked">
				<i class="daui-icon-checked"></i>
			</div>
			<div class="weui-cell__bd">
				单选选项A
			</div>
		</label>
		<label class="weui-cell weui-check__label" for="x14">
			<div class="weui-cell__hd">
				<input type="radio" class="weui-check" name="radio12" id="x14">
				<i class="daui-icon-checked"></i>
			</div>
			<div class="weui-cell__bd">
				单选选项B
			</div>
		</label>
		<label class="weui-cell weui-check__label" for="x15">
			<div class="weui-cell__hd">
				<input type="radio" class="weui-check" name="radio12" id="x15">
				<i class="daui-icon-checked daui-icon-checked-false"></i>
			</div>
			<div class="weui-cell__bd">
				单选选项C(选中变叉)
			</div>
		</label>
	</div>
	
	<div class="weui-cells__title">复选列表</div>
	<div class="weui-cells weui-cells_radio">
		<label class="weui-cell weui-check__label" for="s11">
			<div class="weui-cell__bd">
				复选选项A
			</div>
			<div class="weui-cell__ft">
				<input type="checkbox" class="weui-check" name="radio1" id="s11">
				<span class="weui-icon-checked"></span>
			</div>
		</label>
		<label class="weui-cell weui-check__label" for="s12">
			<div class="weui-cell__bd">
				复选选项B
			</div>
			<div class="weui-cell__ft">
				<input type="checkbox" class="weui-check" name="radio1" id="s12" checked="checked">
				<span class="weui-icon-checked"></span>
			</div>
		</label>
	</div>
	<div class="weui-cells weui-cells_checkbox">
		<label class="weui-cell weui-check__label" for="s13">
			<div class="weui-cell__hd">
				<input type="checkbox" class="weui-check" name="checkbox1" id="s13" checked="checked">
				<i class="daui-icon-checked"></i>
			</div>
			<div class="weui-cell__bd">
				复选选项A
			</div>
		</label>
		<label class="weui-cell weui-check__label" for="s14">
			<div class="weui-cell__hd">
				<input type="checkbox" class="weui-check" name="checkbox1" id="s14">
				<i class="daui-icon-checked"></i>
			</div>
			<div class="weui-cell__bd">
				复选选项B
			</div>
		</label>
		<label class="weui-cell weui-check__label" for="s15">
			<div class="weui-cell__hd">
				<input type="checkbox" class="weui-check" name="checkbox1" id="s15">
				<i class="daui-icon-checked daui-icon-checked-false"></i>
			</div>
			<div class="weui-cell__bd">
				复选选项C(选中变叉)
			</div>
		</label>
	</div>

	<div class="weui-cells__title">其他表单控件</div>
	<div class="weui-cells weui-cells_form">
		<div class="weui-cell weui-cell_vcode">
			<div class="weui-cell__hd">
				<label class="weui-label">手机号</label>
			</div>
			<div class="weui-cell__bd">
				<input class="weui-input" type="tel" placeholder="请输入手机号">
			</div>
			<div class="weui-cell__ft">
				<button class="weui-vcode-btn">获取验证码</button>
			</div>
		</div>
		<div class="weui-cell daui-cell_sm">
			<div class="weui-cell__hd">时间</div>
			<div class="weui-cell__bd">
				<input class="weui-input" type="datetime-local" value="" placeholder="">
			</div>
		</div>
		<div class="weui-cell daui-cell_sm">
			<div class="weui-cell__hd">日期</div>
			<div class="weui-cell__bd">
			  <input class="weui-input" type="date" value="">
			</div>
		</div>
		<div class="weui-cell daui-cell_sm">
			<div class="weui-cell__hd">qq</div>
			<div class="weui-cell__bd">
			  <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入qq号">
			</div>
		</div>
	</div>

	<div class="weui-cells__title">表单报错</div>
	<div class="weui-cells weui-cells_form">
		<div class="weui-cell weui-cell_warn">
			<div class="weui-cell__hd"><label for="" class="weui-label">卡号</label></div>
			<div class="weui-cell__bd">
				<input class="weui-input" type="number" value="weui input error" placeholder="请输入卡号">
			</div>
			<div class="weui-cell__ft">
				<i class="weui-icon-warn"></i>
			</div>
		</div>
	</div>

	<div class="weui-cells__title">开关</div>
	<div class="weui-cells weui-cells_form">
		<div class="weui-cell weui-cell_switch">
			<div class="weui-cell__bd">开启限时抢购</div>
			<div class="weui-cell__ft">
				<input class="weui-switch" type="checkbox">
			</div>
		</div>
		<div class="weui-cell weui-cell_switch">
			<div class="weui-cell__bd">开启倒计时活动</div>
			<div class="weui-cell__ft">
				<label for="switchCP" class="weui-switch-cp">
					<input id="switchCP" class="weui-switch-cp__input" type="checkbox" checked="checked">
					<div class="weui-switch-cp__box"></div>
				</label>
			</div>
		</div>
	</div>

	<div class="weui-cells__title">选择</div>
	<div class="weui-cells">
		<div class="weui-cell weui-cell_select weui-cell_select-before">
			<div class="weui-cell__hd">
				<select class="weui-select" name="select2">
					<option value="1">+86</option>
					<option value="2">+80</option>
					<option value="3">+84</option>
					<option value="4">+87</option>
				</select>
			</div>
			<div class="weui-cell__bd">
				<input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入号码">
			</div>
		</div>
	</div>

	<div class="weui-cells">
		<div class="weui-cell weui-cell_select">
			<div class="weui-cell__bd">
				<select class="weui-select" name="select1">
					<option selected="" value="1">微信号</option>
					<option value="2">QQ号</option>
					<option value="3">Email</option>
				</select>
			</div>
		</div>
		<div class="weui-cell weui-cell_select weui-cell_select-after">
			<div class="weui-cell__hd">
				<label for="" class="weui-label">国家/地区</label>
			</div>
		<div class="weui-cell__bd">
		  <select class="weui-select" name="select2">
			<option value="1">中国</option>
			<option value="2">美国</option>
			<option value="3">英国</option>
		  </select>
		</div>
	  </div>
	</div>

	<form>
		<div class="weui-cells__title">限制数字</div>
		<div class="weui-cells weui-cells_form">
			<div class="weui-cell">
				<div class="weui-cell__bd">
					<textarea class="weui-textarea" id="weui-textarea" onkeyup="astrict()"  placeholder="请输入200字以内" maxlength="200" rows="3"></textarea>
					<div class="weui-textarea-counter"><span id="astrict-sl">0</span>/200</div>
				</div>
			</div>
		</div>
		
		<label for="weuiAgree" class="weui-agree">
			<input id="weuiAgree" type="checkbox" class="weui-agree__checkbox">
			<span class="weui-agree__text">
				阅读并同意<a href="javascript:void(0);">《相关条款》</a>
			</span>
		</label>

		<div style="padding:10px;">
			<a href="javascript:;" class="weui-btn daui-btn_primary daui-btn_block">提 交</a>	
		</div>
	</div>
	
	<div class="daui-gap daui-gap_transparent"></div>
	<div class="daui-footer">
		<div class="daui-footer__links">
			<a class="daui-footer__links-item" href="../index.html">DanceWeUI首页</a>
			<a class="daui-footer__links-item" href="https://gitee.com/lianlianzan/danceui" target="_blank">去码云下载</a>
		</div>
		<div class="daui-footer__text">Copyright &copy; DanceUI</div>
	</div>

	<script src="js/jquery.min.js"></script>
	<script src="js/jquery-weui.min.js"></script>
	<script>
		//限制数字
		function astrict(){
		   var tarea=document.getElementById("weui-textarea");
		   var maxlength=200;
		   var length=tarea.value.length;
		   var count=maxlength-length;

		   var sp=document.getElementById("astrict-sl");
		   sp.innerHTML=count;
		   if(count<=25){
			sp.style.color="red";
		   }else{
			sp.removeAttribute("style");
		   }
		}
	</script>
	
<script type="text/javascript">
$("input[name='ownership']").on('click', function(){
	var tval = $(this).val();
	//console.log(tval)
	if(tval == 5){
		$('.J_ownership_other').show();
	}else{
		$('.J_ownership_other').hide();
	}
});
$('.J_handlertype').on('change', 'input:radio', function(){
	var tval = $(this).val();
	if(tval == 1){
		$('.J_agent_wrap').show();
	}else{
		$('.J_agent_wrap').hide();
	}
})
</script>
</body>
</html>